<!--  -->
<template>
  <div class="dialog-editor-component" v-if="dialogShow">
    <SetDesignDialog :title="'容器组件编辑'+ name " :dialogVisible="dialogShow" :close="close" :hasfooter="false" ref="settingDialog">
      <div class="dlg-main-box component-set">
        <el-tabs v-model="activeName">
          <el-tab-pane label="常用组件" name="1" v-if="NestingComponentIsShow">
            <NestingComponentN ref="nestingComponent" :nesting="nestingContainer" :containerData="containerData"
                :component="compData" :formDataItem="formDataItem" :componentTypes="componentTypes"
                :editorComponent="editorComponent"
                :clearContainerBoxComponent="clearContainerBoxComponent" :clickCurrentComponent="clickCurrentComponent"
                :appendComponent="appendComponent" :chooseForm="chooseForm" :close="close" />
          </el-tab-pane>
          <el-tab-pane label="容器组件" name="2" v-if="layes < 4 && NestingBoxIsShow">
            <NestingBoxN ref="nestingBox" :appendContainerCol="appendContainerCol"
              :clearContainerBoxChild="clearContainerBoxChild"
              :nestingBoxShow="nestingBoxShow" />
          </el-tab-pane>
          <!-- <el-tab-pane label="系统组件" name="3">角色管理</el-tab-pane>
          <el-tab-pane label="其他" name="4">定时任务补偿</el-tab-pane> -->
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import NestingComponentN from '@/components/common/design/dialog/box/NestingComponentN.vue'
import NestingBoxN from '@/components/common/design/dialog/box/NestingBoxN.vue'
import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
import PubSub from 'pubsub-js'
import _ from 'lodash'

export default {
  data () {
    return {
      dialogShow: false,
      loading: true,
      activeName: '1',
      name: '',
      containerData: null,
      formLabelWidth: '120px',
      // 是否存在嵌套的容器
      nestingContainer: false,
      // 针对嵌套box组件中的操作按钮是否显示进行控制
      nestingBoxShow: {
        // 是否显示返回
        showBack: false,
        // 是否显示确定
        showSure: false,
        // 是否显示清空
        showClean: false,
        // 是否显示追加
        showAppend: false
      },
      // 第几层
      layes: -1,
      // // 展示组件分类
      // componentCateType: 0,
      // // 展示组件分类种类
      // componentCateTypes: [
      //   { cate: 1, name: '基础组件' },
      //   { cate: 2, name: '系统组件' },
      //   { cate: 3, name: '高级组件' },
      //   { cate: 4, name: '专业组件' }
      // ],
      // // 默认情况下的选择组件
      // defaultComponentType: -1,
      // // 选择的组件
      // componentType: 0,
      // 获取component类型数据
      componentTypes: [],
      // 现有组件的数据
      compData: null,
      // 嵌套表单组件数据
      formDataItem: null,
      // 容器組件显示
      NestingBoxIsShow: true,
      // 常用组件显示
      NestingComponentIsShow: true
    }
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    // 容器组件内容编辑
    VueFunctions.method(WindowType.CHOOSE_SHOW_CONTAINER_COMPONENT_DATA, ({ containerData, layes, setNum, compData, formDataItem }) => {
      this.close()
      this.dialogShow = true
      this.name = containerData.name
      this.containerData = containerData
      // this.containerCol = {
      //   position: -2,
      //   girdtype: 'col-xs',
      //   col: 1
      // }

      // 打开容器设置，关闭其他所有的展示组件编辑框
      PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE)

      // 获取展示组件类型数据
      this.componentTypes = filterComponentType(BackendjsFunctions.getComponentType())

      this.layes = layes

      if (typeof setNum !== 'undefined' && setNum > -1 && setNum < 3) {
        if (parseInt(setNum) === 0) {
          this.activeName = '2'
          this.NestingBoxIsShow = true
          this.NestingComponentIsShow = false
        } else if (parseInt(setNum) === 2) {
          this.activeName = '1'
          this.NestingComponentIsShow = true
          this.NestingBoxIsShow = false
        }
      } else {
        this.activeName = '1'
        this.NestingBoxIsShow = true
        this.NestingComponentIsShow = true
      }

      // 嵌套box控制按钮显示设置
      this.nestingBoxShow.showAppend = true
      if (parseInt(setNum) === 1) {
        this.nestingBoxShow.showBack = true
      } else if (parseInt(setNum) === 0) {
        this.nestingBoxShow.showClean = true
        this.nestingBoxShow.showBack = false
      }

      // 设置是否有嵌套表单容器组件
      this.setNestingContainer()

      this.compData = compData

      this.formDataItem = formDataItem
      this.$nextTick(() => {
        // if (this.$refs['elCarousel']) {
        //   this.$refs['elCarousel'].setActiveItem(this.initialIndex)
        // }
        // 设置嵌套初始值
        if (this.$refs['nestingBox']) {
          this.$refs['nestingBox'].init()
        }
        // 设置展示组件初始值
        if (this.$refs['nestingComponent']) {
          this.$refs['nestingComponent'].init()
        }
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  watch: {
    componentCateType: {
      handler () {
        this.componentType = 0
      },
      deep: true
    }
  },
  methods: {
    // show () {
    //   this.dialogShow = true
    //   // 打开容器设置，关闭其他所有的展示组件编辑框
    //   PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE)
    //   this.componentTypes = filterComponentType(this.design.ref.contentWindow.vueFunc.getComponentType())
    //   this.$refs['nestingComponent'].init()
    // },
    // 关闭弹出层
    close () {
      this.dialogShow = false
      this.name = ''
      this.containerData = null
      this.nestingContainer = false
      this.nestingBoxShow = {
        // 是否显示返回
        showBack: false,
        // 是否显示确定
        showSure: false,
        // 是否显示清空
        showClean: false,
        // 是否显示追加
        showAppend: false
      }
      this.activeName = '1'
      this.layes = -1
      this.componentTypes = []
      this.compData = null
      this.formDataItem = null
      this.NestingBoxIsShow = true
      this.NestingComponentIsShow = true
    },
    saveclose () {
      this.close()
    },
    setNestingContainer () {
      this.nestingContainer = this.design.ref.contentWindow.vueFunc.isNestingContainer(this.containerData)
    },
    appendContainerCol () {
      let containerCol = this.$refs['nestingBox'].getContainerCol()
      if (!containerCol) {
        return
      }
      this.design.ref.contentWindow.vueFunc.addContainerColByContainerBox(this.containerData, _.cloneDeep(containerCol))
      if (this.nestingBoxShow.showClean === false) {
        this.nestingBoxShow.showClean = true
      }
      if (this.nestingBoxShow.showBack === true) {
        this.nestingBoxShow.showBack = false
      }
      this.close()
    },
    // 清空容器组件中所有的容器数据
    clearContainerBoxChild () {
      let bool = this.design.ref.contentWindow.vueFunc.clearContainerBoxChildByContainerBox(this.containerData)
      if (!bool) {
        console.error('清除容器组件中所有的容器数据失败')
        this.$message.error('操作失败，请联系管理员！')
        return
      }
      if (this.nestingBoxShow.showClean === true) {
        this.nestingBoxShow.showClean = false
      }
      if (this.nestingBoxShow.showBack === false) {
        this.nestingBoxShow.showBack = true
      }
      this.setNestingContainer()
      this.close()
    },
    // 清空容器组件中的所有展示组件
    clearContainerBoxComponent () {
      let bool = this.design.ref.contentWindow.vueFunc.clearContainerBoxComponentByContainerBox(this.containerData)
      if (!bool) {
        console.error('清除容器组件中所有的容器数据失败')
        this.$message.error('操作失败，请联系管理员！')
        return
      }
      this.compData = null
      this.formDataItem = null
      if (this.nestingBoxShow.showBack === false) {
        this.nestingBoxShow.showBack = true
      }
      this.setNestingContainer()
      this.close()
    },
    // 添加系统表单组件
    chooseForm () {
      // 弹窗选择表单
      var containerBox = this.containerData
      window[PubsubType.PUBSUB_DIGLOG_CHOOSE_FORM]((response, closeChooseForm) => {
        this.design.ref.contentWindow.vueFunc.chooseFormForContainerBox(containerBox, response, () => {
          if (typeof closeChooseForm === 'function') {
            closeChooseForm()
          }
        })
      })
      // 关闭
      this.close()
    },
    // 更新组件类型到容器组件当中
    editorComponent () {
      var componentType = this.$refs['nestingComponent'].getComponentType()
      if (componentType === 0) {
        this.$message.error('请选择的组件类型！')
        return
      }
      if (componentType === -1) {
        // 弹窗选择表单
        var containerBox = this.containerData
        window[PubsubType.PUBSUB_DIGLOG_CHOOSE_FORM]((response, closeChooseForm) => {
          this.design.ref.contentWindow.vueFunc.editorComponent(containerBox, componentType, response)
          if (typeof closeChooseForm === 'function') {
            closeChooseForm()
            this.close()
          }
        })
        return
      }
      this.design.ref.contentWindow.vueFunc.editorComponent(this.containerData, componentType)
      this.close()
    },
    appendComponent (pst) {
      let componentType = this.$refs['nestingComponent'].getComponentType()
      if (componentType === 0) {
        this.$message.error('请选择的组件类型！')
        return
      }
      if (componentType === -1) {
        var containerBox = this.containerData
        var setNestingContainerFunc = this.setNestingContainer
        let _this = this
        window[PubsubType.PUBSUB_DIGLOG_CHOOSE_FORM]((response, closeChooseForm) => {
          this.design.ref.contentWindow.vueFunc.appendComponent(containerBox, componentType, pst, response)
          if (typeof closeChooseForm === 'function') {
            closeChooseForm()
          }
          setNestingContainerFunc()
          _this.close()
        })
        return
      }
      this.design.ref.contentWindow.vueFunc.appendComponent(this.containerData, componentType, pst)
      this.setNestingContainer()
      this.close()
    },
    // 编辑当前组件
    clickCurrentComponent () {
      this.design.ref.contentWindow.vueFunc.setupComponent(this.compData)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    NestingComponentN,
    NestingBoxN
  }
}
function filterComponentType (componentType) {
  // 漂浮组件需要去除
  let index = componentType.findIndex(element => {
    return element.id === 19
  })
  if (index > -1) {
    componentType.splice(index, 1)
  }
  // 过滤掉 全部表单组件
  let result = componentType.filter(element => {
    return element.cateType !== 6
  })
  // 添加单独的表单组件
  result.push({
    cateType: 3,
    id: -1, // 单独提出来的 -1 为临时的表单组件
    name: '系统表单',
    remark: '',
    type: ''
  })
  return result
}
</script>
